<template>
  <div class="contest-list">
    <el-card>
      <div slot="header">
        <div style="display: inline-block; line-height: 45px;">
          <span style="font-size: 18px; font-weight: 600; color: rgb(73, 80, 96);">所有比赛</span>
        </div>
        <div style="float: right; line-height: 45px; margin-right: 10px;">
          <div style="display: inline-block;">
            <span>Title : </span>
            <el-input v-model="title" @keyup.enter.native="handleSearch" style="width: 120px;"></el-input>
          </div>
          <div style="display: inline-block; padding-left: 10px;">
            <el-button type="primary" :disabled="buttonDisable" @click="handleSearch">
              <i :class="buttonStyle"></i>
              <span>Search</span>
            </el-button>
          </div>
        </div>
      </div>
      <el-table
          :data="model.contestList"
          empty-text="加载中"
          :header-cell-style="{color:'#606266'}"
          @row-click="handleContestView">
        <el-table-column
            align="center"
            prop="contestId"
            width="75"
            label="ID">
        </el-table-column>
        <el-table-column
            class="contest-item-title"
            align="center"
            width="475"
            label="考试名">
          <template slot-scope="scope">
            <el-link type="info">{{ scope.row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.startTime | showTime }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="结束时间">
          <template slot-scope="scope">
            {{ scope.row.endTime | showTime }}
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            label="状态">
          <template slot-scope="scope">
            <el-tag :type="STATUS_COLOR_SET[scope.row.status]" effect="dark" size="mini">
              {{ STATUS_SET[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="权限">
          <template slot-scope="scope">
            <span>{{ TYPE_SET[scope.row.type] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
        v-if="model.contestCount"
        style="margin-top: 20px;"
        :current-page.sync="currentPage"
        @current-change="handleRoute"
        :page-size="50"
        background
        layout="prev, pager, next"
        :total="model.contestCount">
    </el-pagination>
  </div>
</template>

<script>
import {getContestList, openContest, timeInfo} from '@/network/contest'
import {CONTEST_STATUS} from '../../utils/constants.js'

export default {
  mounted() {
    this.init()
  },
  data: function () {
    return {
      STATUS_SET: CONTEST_STATUS.STATUS_SET,
      STATUS_COLOR_SET: CONTEST_STATUS.STATUS_COLOR_SET,
      TYPE_SET: CONTEST_STATUS.TYPE_SET,
      title: '',
      buttonDisable: false,
      buttonStyle: 'el-icon-refresh',
      currentPage: null,
      model: {
        contestList: [],
        contestCount: 0
      }
    }
  },
  methods: {
    init() {
      this.buttonDisable = true;
      this.buttonStyle = 'el-icon-loading';
      this.title = this.$route.query.keyword;
      this.currentPage = this.$route.query.page ? parseInt(this.$route.query.page) : 1;
      getContestList(this.title, this.currentPage).then(res => {
        this.model = res.data;
        this.buttonDisable = false;
        this.buttonStyle = 'el-icon-refresh'
      }).catch(_ => {
        console.log(_);
        this.buttonDisable = false;
        this.buttonStyle = 'el-icon-refresh'
      })
    },
    handleRoute() {
      this.$router.push({
        name: 'contest-list',
        query: {
          keyword: this.title,
          page: this.currentPage
        }
      })
    },
    handleSearch() {
      this.$router.push({
        name: 'contest-list',
        query: {
          keyword: this.title,
          page: "1"
        }
      })
    },
    handleContestView(row) {
      timeInfo(row.contestId).then(res => {
        console.log(res);
        let date = new Date();
        if (date.getTime() < res.data.startTime) {
          this.$message.error("比赛还未开始");
        }
        //1. 比赛已经结束  2. 用户之前点击进去过比赛
        else if (date.getTime() > res.data.endTime || res.data.openTime !== null) {
          console.log("用户之前点击进去过比赛");
          this.goContestDetail(row.contestId)
        } else {
          this.$confirm('点击进入比赛后将开始计时，请确定开始比赛?', '提示', {
            confirmButtonText: '开始比赛',
            cancelButtonText: '稍后开始',
            type: 'info'
          }).then(() => {
            //todo 开始考试
            openContest(row.contestId).then(res => {
              this.goContestDetail(row.contestId)
            })

          })
        }
      })
    },
    goContestDetail(contestId) {
      this.$router.push({
        name: 'contest-dashboard',
        params: {
          contestId: contestId
        }
      })
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>

<style lang="scss">
.contest-list {
  margin: 20px 2%;
}

.contest-item-title {
  font-size: 28px;
}
</style>
